<template>
    <!-- 我们还是养成一个好习惯，使用一个外围的标签包裹我们的元素 -->
    <div>
        <nav>
            <ul>
                <li>
                    <router-link to="/one/recommended" active-class="active">
                        <span>金牌优选</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/one/fresh" active-class="active">
                        <span>新人推荐</span>
                    </router-link>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script setup lang='ts'>

</script>

<style scoped lang='scss'>
nav {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eaeaea;

    ul {
        display: flex;
        text-align: center;

        li {
            flex: 1;
            display: flex;
            justify-content: center;

            a.active {
                width: 40%;
                border-bottom: 2px solid rgb(194, 41, 158);
                display: block;
                color: rgb(194, 41, 158);
            }
        }
    }
}
</style>